<template>
  <header v-on:click="changeDesc">
    <H1>{{title}} {{desc}}</H1>
  </header>
</template>

<script>
  export default {
    name: 'app-header',
    props: {
      desc: {
        type: String
      }
    },
    data() {
      return {
        title: "Vue.js Demo"
      }
    },
    methods: {
      changeDesc: function () {
        //this.desc="change Header desc";
        this.$emit("descChange", "子向父组件传值");
      }
    }
    /*
    钩子函数：
    beforeCreate: function () {
      alert("组件加载前");
    },
    created:function(){
      alert("组件加载结束，页面还没有显示");
    },
    mounted:function (){
      alert("组件加载前，页面显示");
    },
    updated:function(){
      alert("组件加载完毕，改变页面");
    }*/
  }
</script>

<style scoped>
  header {
    background: lightgreen;
    padding: 10px;
  }

  h1 {
    color: #333;
    text-align: center;
  }
</style>

